<template>
  <div class="mod-config">
    <el-form size="mini" :inline="true" @keyup.enter.native="getDataList(true)">
      <el-form-item>
        <el-input
          clearable
          v-model="queryParams.queryModel.studentName"
          placeholder="学生姓名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          clearable
          v-model="queryParams.queryModel.idNumber"
          placeholder="证件号"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          @click="getDataList(true)"
          type="primary"
          icon="el-icon-search"
          >查询</el-button
        >
        <el-button @click="resetParams" type="warning" icon="el-icon-delete"
          >重置</el-button
        >
        <el-button type="primary" icon="el-icon-plus" @click="addHandle()"
          >新增</el-button
        >
        <el-button
          type="primary"
          :loading="btnLoading"
          @click="excelExport()"
          icon="el-icon-upload2"
          >导出</el-button
        >
        <el-button type="primary" @click="excelImport()" icon="el-icon-download"
          >导入</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      highlight-current-row
      border
      :header-cell-style="{
        background: '#ECF5FF',
        color: '#000',
        fontWeight: 'bold',
        fontSize: '14px',
      }"
      :height="tableHeight"
      :data="pageData.list"
      :default-sort="{ prop: 'updateTime', order: 'ascending' }"
      @sort-change="sortChange"
      v-loading="dataListLoading"
      ref="table"
      style="width: 100%"
    >
      <el-table-column
        sortable
        prop="testId"
        header-align="center"
        align="center"
        :show-overflow-tooltip="true"
        min-width="150"
        label="测试id"
      >
      </el-table-column>
      <el-table-column
        sortable
        prop="studentId"
        header-align="center"
        align="center"
        :show-overflow-tooltip="true"
        min-width="150"
        label="学生id"
      >
      </el-table-column>
      <el-table-column
        sortable
        prop="tetsTime"
        header-align="center"
        align="center"
        :show-overflow-tooltip="true"
        min-width="150"
        label="测试时间"
      >
      </el-table-column>
      <!--<el-table-column
        sortable
        prop="testAddress"
        header-align="center"
        align="center"
        :show-overflow-tooltip="true"
        min-width="150"
        label="测试地点">
      </el-table-column>-->
      <el-table-column
        sortable
        prop="testScore"
        header-align="center"
        align="center"
        :show-overflow-tooltip="true"
        min-width="150"
        label="测试总成绩"
      >
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        min-width="150"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            style="padding: 0"
            v-if="isAuth('test:tzjktest:update')"
            @click="updateHandle(scope.row)"
            >修改</el-button
          >
          <el-button
            type="text"
            style="padding: 0"
            v-if="isAuth('test:tzjktest:info')"
            @click="infoHandle(scope.row)"
            >查看</el-button
          >
          <el-button
            type="text"
            style="padding: 0"
            v-if="isAuth('test:tzjktest:update')"
            @click="copyHandle(scope.row)"
            >拷贝</el-button
          >
          <el-button
            type="text"
            style="padding: 0"
            v-if="isAuth('test:tzjktest:delete')"
            @click="deleteHandle(scope.row.testId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="queryParams.pageNo"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="queryParams.pageSize"
      :total="pageData.totalCount"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <edit
      :dialog-visible="dialog.isVisible"
      :type="dialog.type"
      @close="editClose"
      @success="editSuccess"
      ref="edit"
    ></edit>
    <detail
      :dialog-visible="dialog.detailVisible"
      @close="detailClose"
      ref="detail"
    ></detail>
    <!-- 弹窗, excel导入 -->
    <excel-import
      v-if="excelImportVisible"
      ref="excelImport"
      @refreshDataList="getDataList(true)"
    ></excel-import>
  </div>
</template>

<script>
import UpdatePassword from "@/views/main-navbar-update-password";
import { clearLoginInfo, initQueryParams } from "@/utils";
import edit from "@/views/modules/test/tzjktest-edit";
import detail from "@/views/modules/test/tzjktest-detail";
import { dateSelectShorts, formatMoney } from "@/utils/common";
import excelImport from "@/views/modules/test/excel-import-tzjktest";

export default {
  data() {
    return {
      dialog: {
        isVisible: false,
        type: "add",
        detailVisible: false,
      },
      tableHeight: this.$store.state.common.documentClientHeight - 260,
      queryParams: initQueryParams(),
      pageData: {
        totalCount: 0,
        list: [],
        extData: {},
      },
      dataListLoading: false,
      btnLoading: false,
      excelImportVisible: false,
      createTimePickerOptions: {
        shortcuts: dateSelectShorts(),
      },
      updatePassowrdVisible: false,
    };
  },
  components: { edit, excelImport, detail, UpdatePassword },
  mounted: function () {
    this.getUserInfo();
    this.getMenuNav();
  },
  activated() {
    this.getDataList(true);
  },
  updated() {
    this.$nextTick(() => {
      this.$refs["table"].doLayout();
    });
  },
  methods: {
    // 获取当前用户
    getUserInfo() {
      this.$http({
        url: this.$http.requestUrl("/sys/user/info"),
        method: "get",
        params: this.$http.requestParams(),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.userId = data.user.userId;
          this.userName = data.user.userName;
          this.userTel = data.user.tel;
          this.userMobile = data.user.mobile;
          this.userDeptId = data.user.deptId;
          this.userDeptName = data.user.deptName;
          this.userType = data.user.userType;
        }
      });
    },
    // 修改密码
    updatePasswordHandle() {
      this.updatePassowrdVisible = true;
      this.$refs.updatePassowrd.init();
    },
    // 退出
    logoutHandle() {
      this.$confirm(`确定进行[退出]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.requestUrl("/sys/logout"),
            method: "post",
            data: this.$http.requestData(),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              clearLoginInfo();
              this.$router.push({ name: "login" });
            }
          });
        })
        .catch(() => {});
    },
    editClose() {
      this.dialog.isVisible = false;
    },
    detailClose() {
      this.dialog.detailVisible = false;
    },
    editSuccess() {
      this.getDataList(true);
    },
    resetParams() {
      this.queryParams = initQueryParams();
      this.getDataList(true);
    },
    // 获取数据列表
    getDataList(isReload) {
      if (isReload) {
        this.queryParams.pageNo = 1;
      }
      this.dataListLoading = true;
      this.$http({
        url: this.$http.requestUrl("/test/tzjktest/list"),
        method: "get",
        params: this.$http.requestParams(this.queryParams),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.pageData = data.page;
        }
        this.dataListLoading = false;
      });
    },
    // 弹出excel导入窗口
    excelImport() {
      this.excelImportVisible = true;
      this.$nextTick(() => {
        this.$refs.excelImport.init();
      });
    },
    // 导出excel
    excelExport() {
      this.btnLoading = true;
      this.$http({
        url: this.$http.requestUrl("/test/tzjktest/exportExcel"),
        method: "get",
        responseType: "arraybuffer",
        params: this.$http.requestParams(this.queryParams),
      }).then(({ data }) => {
        this.btnLoading = false;
        let blob = new Blob([data]);
        let fileName = "导出体测主表.xlsx";
        // for IE
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          window.navigator.msSaveOrOpenBlob(blob, fileName);
        } else {
          // for Non-IE (chrome, firefox ...)
          let downloadElement = document.createElement("a");
          let href = window.URL.createObjectURL(blob);
          downloadElement.href = href;
          downloadElement.download = fileName;
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement);
          window.URL.revokeObjectURL(href);
        }
      });
    },
    // 时间选择change事件
    dateChange(val) {
      this.queryParams.queryModel.createTime = val == null ? "" : val[0];
      this.queryParams.queryModel.createTimeEnd = val == null ? "" : val[1];
    },
    // 每页数
    sizeChangeHandle(val) {
      this.queryParams.pageSize = val;
      this.queryParams.pageNo = 1;
      this.getDataList(false);
    },
    // 当前页
    currentChangeHandle(val) {
      this.queryParams.pageNo = val;
      this.getDataList(false);
    },
    // 排序
    sortChange: function (column) {
      if (column.order === "descending") {
        this.queryParams.sort = column.prop + " desc";
      } else if (column.order === "ascending") {
        this.queryParams.sort = column.prop + " asc";
      }
      this.getDataList(true);
    },
    // 新增
    addHandle() {
      this.dialog.type = "add";
      this.dialog.isVisible = true;
      this.$refs.edit.setDataForm(false);
    },
    // 修改
    updateHandle(row) {
      this.dialog.type = "update";
      this.dialog.isVisible = true;
      this.$refs.edit.setDataForm(row);
    },
    infoHandle(row) {
      this.dialog.detailVisible = true;
      this.$refs.detail.setDataForm(row);
    },
    // 拷贝
    copyHandle(row) {
      this.dialog.type = "copy";
      this.dialog.isVisible = true;
      this.$refs.edit.setDataForm(row);
    },
    // 删除
    deleteHandle(id) {
      this.$confirm(`确定对id=${id}的记录进行删除?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http({
          url: this.$http.requestUrl("/test/tzjktest/delete"),
          method: "post",
          data: id,
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList(true);
              },
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },
    getMenuNav: function () {
      this.$http({
        url: this.$http.requestUrl("/sys/menu/nav"),
        method: "get",
        params: this.$http.requestParams(),
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            sessionStorage.setItem(
              "menuList",
              JSON.stringify(data.menuList || "[]")
            );
            sessionStorage.setItem(
              "permissions",
              JSON.stringify(data.permissions || "[]")
            );
          } else {
            sessionStorage.setItem("menuList", "[]");
            sessionStorage.setItem("permissions", "[]");
          }
        })
        .catch((e) => {
          console.log(
            `%c${e} 请求菜单列表和权限失败，跳转至登录页！！`,
            "color:blue"
          );
          router.push({ name: "login" });
        });
    },
  },
};
</script>
<style src="@/assets/scss/stu.scss" lang="scss" scoped>
</style>
<style scoped lang="scss">
.heal-guidance-program {
  padding: 20px;
  background: #dbf3ed;
  height: 100%;

  > div {
    width: 1513px;
  }
  .my-program {
    .cons-item {
      margin-bottom: 36px;
      display: flex;
      background: #edfdf9;
      border-radius: 25px;
      box-sizing: border-box;
      height: 402px;
      box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1);
      width: max-content;
      .main-item {
        min-width: 323px;
        width: 323px;
        min-height: 414px;
        background: #edfdf9;
        border-radius: 25px 25px 0px 0px;
        border-bottom-left-radius: 25px;
        box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1);
        position: relative;
        overflow: hidden;
        margin-right: 50px;
        top: -12px;
        .m-header {
          background: linear-gradient(49deg, #4dbdae 0%, #4dbdae 100%);
          line-height: 70px;
          text-align: center;
          font-size: 24px;
          color: #ffffff;
        }
        .con {
          padding: 20px;
          box-sizing: border-box;
          .name {
            font-size: 18px;
            color: #2f5a54;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .name-str {
              font-size: 20px;
              color: #2f5a54;
              font-weight: 600;
            }
          }
        }
        .remark {
          .rmk-tit {
            color: #2f5a54;
            font-size: 18px;
            font-weight: 500;
            margin: 22px 0px;
          }
          .desc {
            background: #dbf3ed;
            font-size: 16px;
            color: #2f5a54;
            line-height: 26px;
            padding: 10px;
            border-radius: 10px;
            box-sizing: border-box;
          }
        }
        .btns {
          display: flex;
          justify-content: center;
          margin-top: 20px;
          .choose-btn {
            border-color: #4dbdae;
            background: #4dbdae;
            box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1);
            color: #fff;
            border-radius: 10px;
          }
        }
      }
      .item-response {
        max-width: 916px;
        overflow-y: hidden;
        .sub-items {
          display: inline-flex;
        }
      }
      .sub-items {
        display: flex;
        padding: 27px;
        padding-left: 0px;
        .sub-item {
          margin-right: 20px;
          min-width: 283px;
          .s-header {
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            line-height: 56px;
            background: #659eed;
            border-radius: 10px;
            padding: 0px 25px;
            font-size: 16px;
            margin-bottom: 12px;
          }
          .childrens {
            display: flex;
            align-items: center;
            .child-item {
              min-width: 283px;
              margin-right: 20px;
            }
            .child-item:last-child {
              margin-right: 0px;
            }
          }
          .second-bg {
            background: #f3af5c;
          }
          .third-bg {
            background: #fb8885;
          }
          .con {
            background: #dbf3ed;
            border-radius: 10px;
            overflow: hidden;
            .icon-row {
              background-color: #bee5db;
              line-height: 102px;
              height: 102px;
              background-image: url("../../../assets/img/motion_icon.png");
              background-repeat: no-repeat;
              background-size: 56px 56px;
              background-position: 10%;
              display: flex;
              align-items: center;
              .str-box {
                margin-left: 100px;
              }
              .name {
                font-size: 18px;
                color: #2f5a54;
                display: block;
                line-height: 30px;
              }
              .name-str {
                font-size: 24px;
                color: #2f5a54;
                font-weight: 500;
                line-height: 30px;
                display: block;
              }
            }
            .desc-items {
              font-size: 16px;
              color: #2f5a54;
              padding: 0px 24px 24px 24px;
              .field {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 20px;
                line-height: 18px;
                .label {
                }
                .val {
                  font-size: 18px;
                  color: #2f5a54;
                  font-weight: 500;
                }
              }
            }
          }
        }
        .sub-item:last-child {
          margin-right: 0px;
        }
      }
    }
  }
  .other-panel {
    .tit {
      font-size: 24px;
      color: #2f5a54;
      font-weight: 500;
      margin-bottom: 30px;
    }
    .today-targets {
      .row {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        .main-item {
          width: 350px;
          height: 116px;
          background: #edfdf9;
          box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
            -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
          border-radius: 20px;
          padding: 23px 29px;
          display: flex;
          align-items: center;
          .act-con {
            margin-left: 27px;
            span {
              display: block;
              font-size: 18px;
              color: #2f5a54;
            }
            .name {
              font-size: 24px;
              font-weight: 500;
              color: #2f5a54;
            }
          }
        }
        .item {
          width: 350px;
          height: 116px;
          border-radius: 20px;
          margin-left: 36px;
          color: #fff;
          .top-desc {
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 30px;
            margin-left: 80px;
            margin-right: 10px;
          }
          .progress-bar {
            position: relative;
            height: 10px;
            border-radius: 6px;
            width: calc(100% - 150px);
            margin-left: 80px;
            margin-right: 10px;
            margin-top: 15px;
            .bar {
              position: absolute;
              left: 0px;
              top: 0px;
              height: 100%;
              border-radius: 6px;
              background: #fff;
              transition: 0.2s all linear;
            }
            .val {
              position: absolute;
              right: -50px;
              top: -3px;
            }
          }
          .progress-bar1 {
            background: #6e4109;
          }
          .progress-bar2 {
            background: #5d8fd5;
          }
          .progress-bar3 {
            background: #16413c;
          }
        }
        .item:first-child {
          margin-left: 0px;
        }
        .sub-item1 {
          background-color: #f3af5c;
          box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
            -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
          background-image: url("../../../assets/img/acttimeline.png");
          background-repeat: no-repeat;
          background-position: 10%;
          background-size: 35px 35px;
        }
        .sub-item2 {
          background-color: #659eed;
          box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
            -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
          background-image: url("../../../assets/img/actnum.png");
          background-repeat: no-repeat;
          background-position: 10%;
          background-size: 35px 35px;
        }
        .sub-item3 {
          background-color: #4dbdae;
          box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
            -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
          background-image: url("../../../assets/img/actqd.png");
          background-repeat: no-repeat;
          background-position: 10%;
          background-size: 35px 35px;
        }
      }
    }
    .current-period {
      .row {
        .main-item {
          width: 740px;
          .act-con {
            display: flex;
            width: 100%;
            justify-content: space-between;
            .status,
            .distince {
              font-size: 24px;
              font-weight: 500;
              color: #2f5a54;
            }
          }
        }
      }
    }
  }
  .dob-chart-box {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
    > div {
      width: 740px;
      height: 414px;
      background: #edfdf9;
      box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
        -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
      border-radius: 25px;
      padding: 36px 30px;
    }
    .right {
      margin-left: 30px;
      .chart-tabs {
        color: #2f5a54;
        font-size: 24px;
        font-weight: 500;
        span {
          cursor: pointer;
          margin-right: 31px;
          position: relative;
        }
        .active {
          color: #4dbdae;
          &:after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 0px;
            width: 100%;
            height: 4px;
            background: #4dbdae;
            border-radius: 1px;
          }
        }
      }
    }
  }
  .sign-in-records {
    width: 1512px;
    background: #edfdf9;
    box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
      -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
    border-radius: 25px;
    padding: 0px 29px;
    padding-bottom: 30px;
    .tit {
      font-size: 24px;
      font-weight: 500;
      color: #2f5a54;
      margin-top: 48px;
      display: inline-block;
    }
    .types {
      margin-top: 26px;
      display: flex;
      span {
        font-size: 14px;
        color: #2f5a54;
        position: relative;
        margin-right: 44px;
        padding-left: 35px;
        cursor: pointer;
      }

      .no-sign:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 24px;
        bottom: 5px;
        border-radius: 6px;
        left: 0px;
        background: #dddddd;
      }
      .no-cpltoday-target:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 24px;
        bottom: 5px;
        border-radius: 6px;
        left: 0px;
        background: #f3af5c;
      }
      .cpltoday-target:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 24px;
        bottom: 5px;
        border-radius: 6px;
        left: 0px;
        background: #4cbd8e;
      }
      .exceed:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 24px;
        bottom: 5px;
        border-radius: 6px;
        left: 0px;
        background: #4493e5;
      }
    }
    .sign-calendars {
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      padding-bottom: 30px;
    }
    .calendar-item {
      margin-right: 30px;
      .tit {
        margin-left: 10px;
      }
      table {
        border-collapse: collapse;
        border-spacing: 0px;
      }
      table tr th {
        font-size: 12px;
        color: #a8b4b1;
        width: 54px;
        text-align: center;
      }
      table tr {
        line-height: 50px;
        td {
          padding: 0px 10px;
          text-align: center;
          width: 54px;
        }
      }
      table tr td a {
        color: #000000;
        font-size: 16px;
        position: relative;
        display: inline-block;
        text-align: center;
        width: 100%;
      }
      .other-day {
        color: #a8b4b1;
      }
      .cpl-clr:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 100%;
        bottom: -5px;
        border-radius: 6px;
        left: 0px;
        background: #4cbd8e;
      }
      .no-sign-clr:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 100%;
        bottom: -5px;
        border-radius: 6px;
        left: 0px;
        background: #dddddd;
      }
      .no-cpl-clr:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 100%;
        bottom: -5px;
        border-radius: 6px;
        left: 0px;
        background: #f3af5c;
      }
      .exceed-clr:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 100%;
        bottom: -5px;
        border-radius: 6px;
        left: 0px;
        background: #4493e5;
      }
    }
  }
  .single-chart-box {
    padding: 31px 29px;
    width: 1512px;
    min-height: 405px;
    background: #edfdf9;
    box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
      -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
    border-radius: 25px;
  }
  .bot-chart-box {
    margin-top: 30px;
    display: flex;
    > div {
      width: 740px;
      background: #edfdf9;
      box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
        -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
      border-radius: 25px;
    }
    > div:first-child {
      padding: 31px 30px;
    }
    > div:last-child {
      margin-left: 30px;
    }
    .right {
      padding: 36px 30px;
      .tit {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 54px;
        .tit-text {
          font-size: 24px;
          color: #2f5a54;
          font-weight: 500;
        }
        .sort-box {
          a {
            line-height: 36px;
            width: 80px;
            text-align: center;
            border-radius: 8px;
            display: inline-block;
            cursor: pointer;
            background: #edfdf9;
            font-size: 16px;
            color: #2f5a54;
            box-shadow: -2px -2px 8px 0px rgba(241, 252, 249, 1),
              2px 2px 8px 0px rgba(201, 231, 225, 1) inset;
          }
          a:first-child {
            margin-right: 10px;
          }
          .active {
            background: #4dbdae;
            color: #fff;
            box-shadow: none;
          }
        }
      }
      .rank-list {
        .item {
          color: #2f5a54;
          line-height: 55px;
          .rank-num {
            font-weight: 500;
            font-size: 24px;
            margin-right: 30px;
            .unit {
              font-style: normal;
              font-size: 16px;
              font-weight: normal;
            }
          }
          .class-name {
            font-size: 16px;
          }
          .time {
            float: right;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>